<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
 <title>Minimal Websocket test app</title>
<style type="text/css">
	div.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
	.type { font-size:12pt; font: Arial; font-weight:bold; text-align:center; color:#000000; }
	.meas { font-size:9pt; font: Arial; font-weight:normal; text-align:center; color:#404040; }
	.browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
	.group2 { width:600px; vertical-align:middle; text-align:center; background:#f0f0e0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
	.explain { vertical-align:middle; text-align:center; background:#f0f0c0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; color:#404000; }
	.content { vertical-align:top; text-align:center; background:#fffff0; padding:4px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
	.btitle { font-size:10pt; font: Arial; font-weight:normal; text-align:center; color:#404040; vertical-align:top; background:#dfefd0; padding:2px; -webkit-border-radius:6px; -moz-border-radius:4px; border-radius:4px; }
	.conpan { font-size:10pt; font: Arial; font-weight:normal; text-align:center; color:#404040; vertical-align:top; background:#e8f8e0; padding:2px; -webkit-border-radius:6px; -moz-border-radius:4px; border-radius:4px; }
	.icon { font-size:9pt; font: Arial; font-weight:bold; text-align:center; color:#404040; cellspacing=3; vertical-align:top; background:#f8f8e8; padding:4px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
	.canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
</style>
</head>

<body>
<header></header>
<article>

<table><tr><td>

<table width="100%"><tr>
	<td valign=middle align=left><a href="http://libwebsockets.org"><img src="/lmp-logo.png"></a></td>
	<td>
	</td>
</tr></table>

</td></tr><tr><td>

<section id="increment" class="group2">
<div class="title">Boards</div>
<table><tr><td>
	<section id="boards">
	</section>
</td></tr></table>
</section>
<br>
</td></tr>
<tr><td><div id="debug">...</div>
</td></tr>
</table>

</article>

<script>

var connection = 0;

grayOut(true,{'zindex':'499'});
conn_retry();

var pos = 0;

function get_appropriate_ws_url()
{
	var pcol;
	var u = document.URL;

	/*
	 * We open the websocket encrypted if this page came on an
	 * https:// url itself, otherwise unencrypted
	 */

	if (u.substring(0, 5) == "https") {
		pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) == "http")
			u = u.substr(7);
	}

	u = u.split('/');

	return pcol + u[0];
}



/* lmpd protocol */
	
	var socket_di;
	var jdoc;


function get_if_index(iff, name)
{
	var n = 0;
	while (iff[n]) {
		if (iff[n].name == name)
			return n;
		n++;
	}
	return -1;
}

function send_id(event, ser)
{
	socket_di.send("{\"schema\":\"org.linaro.lmp.base\", \"serial\":\""+ser+"\",\"identify\":\"toggle\"}");
	event.stopPropagation();
}

function changemode(event, sel, typ, serial, modename)
{
	socket_di.send("{\"schema\":\"org.linaro.lmp."+typ+"\", \"serial\":\""+serial+
		"\",\"modes\":[{\"name\":\""+modename+"\", \"option\":\""+sel.options[sel.selectedIndex].text+
		"\"}]}");
		
	document.getElementById("debug").textContent = "{\"schema\":\"org.linaro.lmp."+typ+"\", \"serial\":\""+serial+
		"\",\"modes\":[{\"name\":\""+modename+"\", \"option\":\""+sel.options[sel.selectedIndex].text+
		"\"}]}";
	event.stopPropagation();
}

function conn_retry()
{

	if (connection)
		return;

	try {
	                               
		if (typeof MozWebSocket != "undefined") {
			socket_di = new MozWebSocket(get_appropriate_ws_url(),
					   "wsprotocol.org.linaro.lmpd");
		} else {
			socket_di = new WebSocket(get_appropriate_ws_url(),
					   "wsprotocol.org.linaro.lmpd");
		}
	
		socket_di.onopen = function() {
			grayOut(false);
			connection = 1;
		}

		socket_di.onmessage = function (msg) {
			var s;

			try {
				jdoc = JSON.parse(msg.data);
			} catch (exception) {
				document.getElementById("debug").textContent = exception.name +" " + exception.message + " \'" + msg.data + "\'";
				return;
			}
			if (jdoc.schema == "org.linaro.lmp.boardlist") {
				s = "<table cellspacing=\"10\">";
				for (n = 0; jdoc.boards[n]; n++) {
					if ((n & 1) == 0)
						s += "<tr>";
					s += "<td class=\"content\">";
					s += "<table width=\"100%\"><tr><td colspan=\"3\" class=\"btitle\"><table width=\"100%\"><tr><td class=\"type\">"
					s += jdoc.boards[n].type + "</td><td>" + jdoc.boards[n].serial +
						"</td><td><input type=\"checkbox\" id=\"btnid." + jdoc.boards[n].serial +
						"\" onclick='send_id(event, \"" + jdoc.boards[n].serial +
						"\")' checked="+jdoc.boards[n].identify+">id</input></td></tr></table>";
					
					if (jdoc.boards[n].modes != null) {
						s += "</td></tr><tr><td colspan=\"3\" class=\"conpan\"><table width=\"100%\"><tr>";
						for (y = 0; jdoc.boards[n].modes[y] != null; y++) {
							if (jdoc.boards[n].modes[y].options != null) {
								s += "<td>"+jdoc.boards[n].modes[y].name+": <select class=\"meas\" onchange='changemode(event, this, \""+jdoc.boards[n].type+"\", \""+jdoc.boards[n].serial+"\", \""+jdoc.boards[n].modes[y].name+"\");' id=\"sel."+jdoc.boards[n].serial+"."+jdoc.boards[n].modes[y].name+"\">";
								z = 0; while (jdoc.boards[n].modes[y].options[z] != null) {
									s += "<option value=\""+jdoc.boards[n].modes[y].options[z].name+"\">"+jdoc.boards[n].modes[y].options[z].name+"</option>";
									z++;
								}
								s += "<\select></td>";
							}
						}
						s += "</tr></table></td></tr>";
					}
					s += "<tr><td>";
					if (jdoc.boards[n].io) {
						for (y = 0; jdoc.boards[n].io[y]; y++) {
							if (jdoc.boards[n].io[y].grp == 0) {
								s += "<table width=\"100%\" class=\"icon\"><tr><td><img src=\"/" + jdoc.boards[n].io[y].if + ".png\"></td></tr>";
								s += "<tr><td>"+jdoc.boards[n].io[y].name;
								
								q = get_if_index(jdoc.boards[n].if, jdoc.boards[n].io[y].if);
								if (q >= 0 && jdoc.boards[n].if[q].pins) {
									z = 0; while (jdoc.boards[n].if[q].pins[z])
										s += "<span class=\"meas\" id=\"rep."+jdoc.boards[n].serial+"."+jdoc.boards[n].io[y].name+"."+jdoc.boards[n].if[q].pins[z++] + "\"></span>";
								}
								s += "</td></tr></table>";
							}
						}
					}
					s += "</td><td width=\"90%\">";
					if (jdoc.boards[n].int) {
						for (y = 0; jdoc.boards[n].int[y]; y++) {
								s += "<table width=\"100%\" class=\"icon\"><tr><td align=\"center\"><img src=\"/" + jdoc.boards[n].int[y].if + ".png\"></td></tr>";
								s += "<tr><td>"+jdoc.boards[n].int[y].name+"</td></tr></table>";
						}
					}
					s += "</td><td>";
					if (jdoc.boards[n].io) {
						for (y = 0; jdoc.boards[n].io[y]; y++) {
							if (jdoc.boards[n].io[y].grp != 0) {
								s += "<table width=\"100%\" class=\"icon\"><tr><td class=\"icon\"><img src=\"/" + jdoc.boards[n].io[y].if + ".png\"></td></tr>";
								s += "<tr><td>"+jdoc.boards[n].io[y].name;
								
								q = get_if_index(jdoc.boards[n].if, jdoc.boards[n].io[y].if);
								if (q >= 0 && jdoc.boards[n].if[q].pins) {
									z = 0; while (jdoc.boards[n].if[q].pins[z])
										s += "<span class=\"meas\" id=\"rep."+jdoc.boards[n].serial+"."+jdoc.boards[n].io[y].name+
											"."+jdoc.boards[n].if[q].pins[z++] + "\"></span>";
								}
								s += "</td></tr></table>";
							}
						}
					}
					
					s += "</td></tr>";
					s += "</table>";
					s += "</td>";
					if ((n & 1) == 1)
						s += "</tr>";
				}
				s += "</table>";
				document.getElementById("boards").innerHTML = s;
			}  

			if (jdoc.schema == "org.linaro.lmp.report") {

				if (jdoc.identify != null)
					document.getElementById("btnid."+jdoc.serial).checked = jdoc.identify;
									
				n = 0;
				while (jdoc.report[n]) {

					if (document.getElementById("rep."+jdoc.serial+"."+jdoc.report[n].name)) {
						if (jdoc.report[n].val) {
							s = "<table><tr><td style=\"meas\">" + jdoc.report[n].name + "</td><td style=\"meas\">" + jdoc.report[n].val;
							s += jdoc.report[n].unit + "</td></tr></table>";
							document.getElementById("rep."+jdoc.serial+"."+jdoc.report[n].name).innerHTML = s;
						}
					}
					if (jdoc.report[n].name == "modes") {
						var k = 0;
						while (jdoc.report[n].modes[k]) {
							ctl = "sel."+jdoc.serial+"."+jdoc.report[n].modes[k].name;
							if (document.getElementById(ctl))
								if (document.getElementById(ctl).value != jdoc.report[n].modes[k].mode)
									document.getElementById(ctl).value = jdoc.report[n].modes[k].mode;
							k++;
						}
					}
					n++;
				}
			}
		}
		socket_di.onclose = function(){
			connection = 0;
			grayOut(true,{'zindex':'499'});
			setTimeout("conn_retry();", 1000);
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}
}

/*
 * This section around grayOut came from here:
 * http://www.codingforums.com/archive/index.php/t-151720.html
 * Assumed public domain
 */

function grayOut(vis, options) {
	var options = options || {};
	var zindex = options.zindex || 50;
	var opacity = options.opacity || 70;
	var opaque = (opacity / 100);
	var bgcolor = options.bgcolor || '#000000';
	var dark = document.getElementById('darkenScreenObject');

	if (!dark) {
		var tbody = document.getElementsByTagName("body")[0];
		var tnode = document.createElement('div');
		tnode.style.position = 'absolute';
		tnode.style.top = '0px';
		tnode.style.left = '0px';
		tnode.style.overflow = 'hidden';
		tnode.style.display ='none';
		tnode.id = 'darkenScreenObject';
		tbody.appendChild(tnode);
		dark = document.getElementById('darkenScreenObject');
	}
	if (vis) {
		dark.style.opacity = opaque;
		dark.style.MozOpacity = opaque;
		dark.style.filter ='alpha(opacity='+opacity+')';
		dark.style.zIndex = zindex;
		dark.style.backgroundColor = bgcolor;
		dark.style.width = gsize(1);
		dark.style.height = gsize(0);
		dark.style.display ='block';
		addEvent(window, "resize",
			function() {
				dark.style.height = gsize(0);
				dark.style.width = gsize(1);
			}
		);
	} else {
		dark.style.display = 'none';
		removeEvent(window, "resize",
			function() {
				dark.style.height = gsize(0);
				dark.style.width = gsize(1);
			}
		);
	}
}

function gsize(ptype)
{
	var h = document.compatMode == 'CSS1Compat' &&
		!window.opera ?
			document.documentElement.clientHeight :
						document.body.clientHeight;
	var w = document.compatMode == 'CSS1Compat' &&
		!window.opera ? 
			document.documentElement.clientWidth :
						document.body.clientWidth;
	if (document.body && 
		    (document.body.scrollWidth || document.body.scrollHeight)) {
		var pageWidth = (w > (t = document.body.scrollWidth)) ?
					("" + w + "px") : ("" + (t) + "px");
		var pageHeight = (h > (t = document.body.scrollHeight)) ?
					("" + h + "px") : ("" + (t) + "px");
	} else if (document.body.offsetWidth) {
		var pageWidth = (w > (t = document.body.offsetWidth)) ?
					("" + w + "px") : ("" + (t) + "px");
		var pageHeight =(h > (t = document.body.offsetHeight)) ?
					("" + h + "px") : ("" + (t) + "px");
	} else {
		var pageWidth = '100%';
		var pageHeight = '100%';
	}
	return (ptype == 1) ? pageWidth : pageHeight;
}

function addEvent( obj, type, fn ) {
	if ( obj.attachEvent ) {
		obj['e' + type + fn] = fn;
		obj[type+fn] = function() { obj['e' + type+fn]( window.event );}
		obj.attachEvent('on' + type, obj[type + fn]);
	} else
		obj.addEventListener(type, fn, false);
}

function removeEvent( obj, type, fn ) {
	if ( obj.detachEvent ) {
		obj.detachEvent('on' + type, obj[type + fn]);
		obj[type + fn] = null;
	} else
		obj.removeEventListener(type, fn, false);
}

/*
 * end of grayOut related stuff
 */

</script>

</body>
</html>
